<template>
  <!-- 悬浮导航栏 -->
  <div class="header">
    <a-menu
      mode="horizontal"
      v-model="current"
      class="top_menu"
      @click="changePath"
    >
      <a-menu-item key="index"> <a-icon type="home" />首页 </a-menu-item>
      <a-menu-item key="count"> <a-icon type="line-chart" />疫情 </a-menu-item>
      <a-menu-item key="message"> <a-icon type="message" />热榜 </a-menu-item>
      <a-menu-item key="about"> <a-icon type="info-circle" />关于 </a-menu-item>
      <a-menu-item key="admin" v-show="info.type == 1">
        <a-icon type="control" />后台
      </a-menu-item>
      <a-input-search
        placeholder="搜索相关文章"
        style="width: 200px; margin-left: 350px"
        class="search_article"
        @search="search"
      />
    </a-menu>
    <a-row>
      <a-col :xs="{ span: 0 }" :lg="{ span: 24 }">
        <div class="type">
          <nav class="header__below-class">
            <a-row>
              <a-col span="20">
                <span
                  class="item"
                  style="cursor: pointer"
                  :title="item"
                  v-for="(item, idx) in category"
                  :key="idx"
                  @click="search(item[1])"
                  >{{ item[1] }}</span
                >
              </a-col>
              <a-col span="2">
                <div class="header__below-sign">
                  <div class="item">
                    <svg
                      class="icon"
                      viewBox="0 0 1024 1024"
                      xmlns="http://www.w3.org/2000/svg"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M710.698 299a213.572 213.572 0 1 0-213.572 213.954A213.572 213.572 0 0 0 710.698 299zm85.429 0a299.382 299.382 0 1 1-299-299 299 299 0 0 1 299 299z"
                      ></path>
                      <path
                        d="M114.223 1024a46.91 46.91 0 0 1-46.91-46.91 465.281 465.281 0 0 1 468.332-460.704 475.197 475.197 0 0 1 228.827 58.35 46.91 46.91 0 1 1-45.384 82.378 381.378 381.378 0 0 0-183.443-46.909 371.08 371.08 0 0 0-374.131 366.886A47.29 47.29 0 0 1 114.223 1024zM944.483 755.129a38.138 38.138 0 0 0-58.733 0l-146.449 152.55-92.675-91.53a38.138 38.138 0 0 0-58.732 0 43.858 43.858 0 0 0 0 61.402l117.083 122.422a14.492 14.492 0 0 0 8.39 4.577c4.196 0 4.196 4.195 8.39 4.195h32.037c4.195 0 4.195-4.195 8.39-4.195s4.195-4.577 8.39-4.577L946.39 816.15a48.054 48.054 0 0 0-1.906-61.02z"
                      ></path>
                      <path
                        d="M763.328 776.104L730.53 744.45a79.708 79.708 0 0 0 32.798 31.654"
                      ></path>
                    </svg>
                    <router-link
                      :to="{
                        name: 'login',
                      }"
                      v-show="!isLogin"
                      ><span>未登录</span>
                    </router-link>
                    <a-popconfirm
                      title="确认退出账号吗?"
                      ok-text="确认"
                      cancel-text="取消"
                      placement="bottom"
                      v-show="isLogin"
                      @confirm="quit()"
                      class="pop-box"
                    >
                      {{ info.username }}
                    </a-popconfirm>
                  </div>
                </div>
              </a-col>
            </a-row>
          </nav>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  mounted() {
    this.current = [this.$route.name];
    if (localStorage.getItem("userData")) {
      this.isLogin = true;
      this.info = JSON.parse(localStorage.getItem("userData"));
    }
    this.$bus.$on("setUserInfo", (info) => {
      this.info = info;
      this.isLogin = true;
      localStorage.setItem("userData", JSON.stringify(info));
    });
    // 获取分类列表
    this.getCategory();
  },
  beforeDestroy() {
    this.$bus.$off("setUserInfo");
  },
  data() {
    return {
      current: [],
      info: {},
      isLogin: false,
      category: [],
    };
  },
  methods: {
    // 控制跳转指定路由
    changePath({ key }) {
      this.$router.push({ name: key });
    },
    // 清空cookie 退出账号
    quit() {
      localStorage.removeItem('userData')
      this.info = {};
      this.isLogin = false;
    },
    // 获取分类
    getCategory() {
      this.$axios
        .get("/api/category/list.php")
        .then((res) => {
          this.category = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索文章
    search(keyword) {
      if (keyword.trim() === "") return this.$message.error("请输入搜索内容");
      this.$router.push({
        name: "search",
        params: {
          keyword,
        },
      });
    },
  },
};
</script>

<style scoped>
.header {
  height: 50px;
}
.header > div,
.header ul {
  z-index: 2;
}
.top_menu {
  position: fixed;
  width: 100%;
}
.type {
  position: fixed;
  top: 48px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}
.header__below-class {
  padding: 0 50px;
}
.header__below-class .item {
  margin-right: 15px;
  height: 45px;
  line-height: 45px;
  color: #909399;
  transition: color 0.35s;
  white-space: nowrap;
}
.header__below-sign {
  margin-left: auto;
}
.header__below-sign .item {
  display: flex;
  align-items: center;
  height: 45px;
  color: #909399;
}
.header__below-sign .item .icon {
  fill: #909399;
  margin-right: 5px;
}
.header__below-sign .item a {
  color: #909399;
  transition: color 0.25s;
}
.pop-box {
  cursor: pointer;
}
</style>
